forum

home / developersection / forums / making main section of a page fill the remaining height with css only

Ask Question

Making main section of a page fill the remaining height with CSS only

Anonymous User 2504 15-Jun-2013
Hi Expert,

I have created two div as following

<div class="header">
    <h1>My Cool Site</h1>
</div>

<div class="main">
    Hello world
</div>

The header div should take up as much space it needs. The main div should fill the remaining page height exactly - a scroll bar should not appear. Is this possible to do with CSS only? No JavaScript.

Thanks in advance for any recommendations or solutions.
css-css3 css-css3 
Updated on 15-Jun-2013
Anonymous User

Other

I am a content writter !

Message
Can you answer this question?
Answer

1 Answers

AVADHESH PATEL

AVADHESH PATEL

15-Jun-2013
Hi John,

Try this solution. This positions your div at the bottom.

.main {
   background-color: #BAA378;
   border: 10px solid #453823;
   padding: 10px;
   height: 86%;
   position:fixed;
   bottom: 0;
   width: 100%;
}

I hope it helpful  for you. 
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy